<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      :columns="columns"
      :data-grid-title="dataGridTitle"
      v-model:activeFormData="formData"
      :render-form-title="renderFormTitle"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-list-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #formSlot>
        <el-descriptions :column="2" border>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="required">
                <el-descriptions-item label-align="right" label-width="160px">
                  <template #label>
                    <div class="required">
                      <el-descriptions-item label-align="right" label-width="160px">
                        <template #label>
                          <div class="required">数据库类型</div>
                        </template>
                        <div>
                          <el-form-item
                            prop="databaseTypeCode"
                            :rules="[
                              {
                                required: true,
                                message: '数据库类型不能为空!',
                                trigger: 'blur',
                              },
                            ]"
                          >
                            <dict-selector v-model="formData.databaseTypeCode" dict-code="DATABASE_TYPE" placeholder="请填数据库类型..."></dict-selector>
                          </el-form-item>
                        </div>
                      </el-descriptions-item>
                    </div>
                  </template>
                  <div>
                    <el-form-item
                      prop="databaseTypeCode"
                      :rules="[
                        {
                          required: true,
                          message: '数据库类型不能为空!',
                          trigger: 'blur',
                        },
                      ]"
                    >
                      <dict-selector v-model="formData.databaseTypeCode" dict-code="DATABASE_TYPE" placeholder="请填数据库类型..."></dict-selector>
                    </el-form-item>
                  </div>
                </el-descriptions-item>
              </div>
            </template>
            <div>
              <el-form-item
                prop="databaseTypeCode"
                :rules="[
                  {
                    required: true,
                    message: '数据库类型不能为空!',
                    trigger: 'blur',
                  },
                ]"
              >
                <dict-selector v-model="formData.databaseTypeCode" dict-code="DATABASE_TYPE" placeholder="请填数据库类型..."></dict-selector>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="required">驱动类名称</div>
            </template>
            <div>
              <el-form-item
                prop="driverClassName"
                :rules="[
                  {
                    required: true,
                    message: '驱动类名称不能为空!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.driverClassName" placeholder="请填驱动类名称..."></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="required">备注</div>
            </template>
            <div>
              <el-form-item
                prop="driverComment"
                :rules="[
                  {
                    required: true,
                    message: '驱动说明不能为空!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.driverComment" placeholder="请填驱动说明..."></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div>排序号</div>
            </template>
            <div>
              <el-form-item prop="sortNo" :rules="[]">
                <el-input-number v-model="formData.sortNo"></el-input-number>
              </el-form-item>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label-align="right" label-width="160px" :span="4">
            <template #label>
              <div class="required">JAR存放路径</div>
            </template>
            <div>
              <el-form-item
                prop="jarPath"
                :rules="[
                  {
                    required: true,
                    message: 'jar 存放路径不能为空!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.jarPath" placeholder="请输入JAR 存放路径..."></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="160px" :span="4">
            <template #label>
              <div class="required">URL模板</div>
            </template>
            <div>
              <el-form-item
                prop="urlTemplate"
                :rules="[
                  {
                    required: true,
                    message: 'URL模板不能为空!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.urlTemplate" placeholder="请输入URL模板..."></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label-align="right" label-width="160px" :span="4">
            <template #label>
              <div class="required">Druid 配置</div>
            </template>
            <div>
              <el-form-item prop="druidConfig">
                <basic-editor ref="druidConfigRef" v-model="formData.druidConfig" style="height: 500px"></basic-editor>
                <!-- <el-input v-model="formData.druidConfig" placeholder="请输入URL模板..."></el-input> -->
              </el-form-item>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </dw-menu-datagrid-form>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IAddInfoHttpConfig, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';
import BasicEditor from '@/components/code-editor/basic-editor/index.vue';

import type { IJdbcDriverDict } from './jdbc-driver-dict';
defineOptions({
  name: 'JdbcDriverDict',
});
const formData = ref<IJdbcDriverDict>({
  id: '',
  databaseTypeCode: '',
  databaseTypeName: '',
  driverClassName: '',
  driverComment: '',
  urlTemplate: '',
  jarPath: '',
  druidConfig: '',
  sortNo: 1,
});

const dataGridTitle = 'JDBC驱动列表';
const renderFormTitle = (stateValue: 'add' | 'edit', data: IJdbcDriverDict) => {
  if (stateValue === 'add') {
    return 'JDBC驱动信息';
  } else {
    return data.driverComment;
  }
};
const columns = ref<IColumn[]>([
  {
    prop: 'databaseTypeName',
    label: '数据库类型',
    align: 'left',
    width: 260,
  },
  {
    prop: 'driverClassName',
    label: '驱动类名称',
    align: 'left',
    width: 260,
  },
  {
    prop: 'driverComment',
    label: '驱动说明',
    align: 'left',
    width: 280,
  },
  {
    prop: 'jarPath',
    label: 'JAR存放路径',
    align: 'left',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/modeling/jdbc/driver/dict/#{id}',
  delInfoMsgEmphasize: '#{datasourceComment}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/modeling/jdbc/driver/dict/list',
};
const getPageHttpConfig: IGetPageHttpConfig<IJdbcDriverDict> = {
  url: '/admin-api/modeling/jdbc/driver/dict/page/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<IJdbcDriverDict> = {
  url: '/admin-api/modeling/jdbc/driver/dict/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<IJdbcDriverDict> = {
  url: '/admin-api/modeling/jdbc/driver/dict',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<IJdbcDriverDict> = {
  url: '/admin-api/modeling/jdbc/driver/dict',
};
</script>
